<ion-view view-title="选项卡{{vo.index+1}}">
    <ion-nav-buttons side="left">
        <button ui-sref="home" class="button button-positive icon ion-chevron-left"></button>
    </ion-nav-buttons>
    
    <ion-content scroll="false" class="has-header" has-bouncing="false">
        <div class="tab-buttons">
            <div class="button-bar">
                <a ng-click="vo.index=0" class="button" ng-style="{color:vo.index==0?'#32cd32':''}"><i class="fa fa-fw fa-apple"></i> 苹果</a>
                <a ng-click="vo.index=1" class="button" ng-style="{color:vo.index==1?'#32cd32':''}"><i class="fa fa-fw fa-child"></i> 少儿</a>
                <a ng-click="vo.index=2" class="button" ng-style="{color:vo.index==2?'#32cd32':''}"><i class="fa fa-fw fa-diamond"></i> 理财</a>
                <a ng-click="vo.index=3" class="button" ng-style="{color:vo.index==3?'#32cd32':''}"><i class="fa fa-fw fa-paw"></i> 百度</a>
            </div>
            <div class="line" ng-style="{left:vo.index*100/4+'%',width:100/4+'%'}"></div>
        </div>
        <ion-scroll overflow-scroll="false" ng-style="{height:screenHeight+'px'}">
            <ion-slide-box show-pager="false" active-slide="vo.index" on-slide-changed="vo.index = $index">
                <ion-slide>
                    <div class="list">
                        <a class="item item-thumbnail-left">
                            <img src="images/home/item1.jpg">
                            <h2 style="font-weight:bold;">iPad Pro</h2>
                            <p style="white-space:normal;">Apple/苹果 9.7 英寸 iPad Pro WLAN 128GB</p>
                        </a>
                        <a class="item item-thumbnail-left">
                            <img src="images/home/item2.jpg">
                            <h2 style="font-weight:bold;">iPhone 7</h2>
                            <p style="white-space:normal;">【12期免息|现货】Apple/苹果 iPhone 7 全网通4G苹果7手机正品</p>
                        </a>
                        <a class="item item-thumbnail-left">
                            <img src="images/home/item3.jpg">
                            <h2 style="font-weight:bold;">iWatch Series 2</h2>
                            <p style="white-space:normal;">Apple/苹果 Apple Watch Series 2 智能手表42mm</p>
                        </a>
                    </div>  
                </ion-slide>
                <ion-slide>
                    <div style="width:100%;height:1000px;text-align:center;padding:100px;">
                        <i class="fa fa-fw fa-child balanced" style="font-size:100px;"></i>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div style="width:100%;height:1000px;text-align:center;padding:100px;">
                        <i class="fa fa-fw fa-diamond balanced" style="font-size:100px;"></i>
                    </div>
                </ion-slide>
                <ion-slide>
                    <iframe src="http://www.baidu.com" style="width:100%;" ng-style="{height:screenHeight+'px'}">
                        
                    </iframe>
                </ion-slide>
            </ion-slide-box>
        </ion-scroll>
    </ion-content>
    <style type="text/css">
        .tab-buttons{
            position:relative;
            border-bottom:1px solid #ddd;
        }
        .tab-buttons .button.activated{
            border-color:#f8f8f8;
            background:#f8f8f8;
        }
        .button-bar .button{
            padding:0;
        }
        .tab-buttons .line{
            display:inline-block;
            position:absolute;
            top:46px;
            z-index:9;
            height:3px;
            line-height:3px;
            border-bottom:3px solid #32cd32;
            transition:left .2s ease-in-out;
        }
    </style>
</ion-view>